// 公共字体图标
@import '../fonts/index.css';

/* 主题 */
@import './theme.scss';

/* 骨架视图 */
.skeleton-view {
  background: linear-gradient(90deg, #f1f2f4 25%, #e6e6e6 37%, #f1f2f4 50%);
  background-size: 400% 100%;
}
.skeleton-view-animate {
  animation: skeleton 1.8s ease infinite;
}

/* 超出1行省略号 */
.je-line-ellipsis-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 超出2行省略号 */
.je-line-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 高亮 */
.je-keyword-highlight {
  color: $je-primary-color;
}
/* 点击水波纹 */
.je-click-ripple {
  overflow: hidden;
  position: relative;
  transition: background-color 0.1s linear, border 0.1s linear;
  &:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #000 10%, rgba(0, 0, 0, 0) 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10);
    opacity: 0;
    transition: transform 0.2s, opacity 0.5s;
  }
  &:active:after {
    transform: scale(0);
    opacity: 0.2;
    transition: 0s;
  }
}
/* 全屏 */
.je-absolute-fullscreen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.je-fixed-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 边框 */
.je-list-item--border::after {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 1px;
  content: '';
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  background-color: $je-border-color;
}

/*------------------- 灰色模式 --------------------*/
.je-theme-gray-mode {
  filter: grayscale(100%);
  filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}

@keyframes skeleton {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}
